/* CSS reset */
* {
    box-sizing: border-box;
}

*:before, *:after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    /*图片最大不能超过容器*/
    max-width: 100%;
    max-height: 100%;
}

/* style */
body {
    /*border: 1px solid red;*/
    background: #EEE;
    min-width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    background-image: url("images/background.gif");
    background-size: auto;
    /*background-repeat: no-repeat;*/
}

.globalHeader {
    /*border: 1px solid red;*/
    /*居中：上下边距，左右边距各给20像素*/
    /*margin:20px 20px;*/
    margin: 0 20px;
    padding: 20px 0 20px;
}

@media (min-width: 500px) {
    .globalHeader {
        /*margin: 60px 0 100px;*/
        margin: 0 0 100px;
        padding: 60px 0 0;
    }
}

.searchForm {
    /*弹性布局，中间填充空*/
    display: flex;
    justify-content: space-between;
}

/*（PC）小于500px宽度不管*/
@media (min-width: 500px) {
    .searchForm {
        /*宽度大于500px时，与外部的样式合并*/
        max-width: 400px;
        /*左右居中(一般配合最大宽度固定或者宽度固定使用)*/
        /*margin: 0 auto;*/
        margin-left: auto;
        margin-right: auto;
    }
}

/*(手机)宽度大于500px不管*/
@media (max-width: 500px) {
    /*.searchForm {
        background: red;
    }*/
}

.searchForm > input {
    width: 100%;
    margin-right: 10px;
    height: 40px;
    /*input内边距左右各10像素*/
    padding: 0 10px;
    /*input边框重做*/
    border: 1px solid #ddd;
    border-radius: 4px;
}

.searchForm > input:focus {
    outline: none;
}

.searchForm > button {
    white-space: nowrap;
    /*button内边距左右各10像素*/
    padding: 0 28px;
    /*抄figma生成代码*/
    border: none;
    background-color: #4e6ef2;
    border-radius: 4px;
    color: white;
    font-size: 16px;
    outline: none;
    filter: chroma(color=#000000);
    cursor: pointer;
}

.searchForm > button:hover {
    background: #4662D9;
}

.globalMain {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.siteList {
    /*border: 1px solid red;*/
    display: flex;
    flex-wrap: wrap;
    /*左右对齐*/
    margin: 20px;
    justify-content: space-between;
}

@media (min-width: 500px) {
    /*对PC端的左右margin特殊处理（放在后面覆盖前面的样式）*/
    .siteList {
        margin-left: 0;
        /*负margin为了放下每排最后一个site元素*/
        margin-right: -25px;
        justify-content: flex-start;
    }
}

.siteList > li {
    /*border: 1px solid red;*/
    margin-bottom: 10px;
    /*border: 1px solid blue;*/
    /*margin-right: 25px;*/
}

/*只在PC端设置margin-right*/
@media (min-width: 500px) {
    .siteList > li {
        margin-right: 25px;
    }
}

.siteList > li:hover {
    box-shadow: 0 10px 30px rgba(51, 51, 51, .15);
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    transform: translateY(-3px)
}

.siteList .site {
    border: 1px solid #ddd;
    width: 160px;
    display: flex;
    justify-content: center;
    /*水平居中*/
    align-items: center;
    /*竖直排列*/
    flex-direction: column;
    background: white;
    border-radius: 4px;
    /*上下内边距20像素*/
    padding: 20px 0;
    position: relative;
    /*手型*/
    cursor: pointer;
    opacity: 80%;
}

.siteList .site > .logo {
    /*border: 1px solid red;*/
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 64px;
    /*logo文字全大写*/
    text-transform: uppercase;
}

.siteList .site > .link {
    font-size: 14px;
    margin-top: 4px;
}

.siteList .site > .close {
    position: absolute;
    right: 10px;
    top: 5px;
    display: none;
    /*关闭按钮区域恢复默认鼠标样式*/
    cursor: default;
}

/*悬浮显示关闭按钮*/
.siteList .site:hover > .close {
    display: block;
}

.siteList .site:hover {
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.06);
}

.siteList .addButton {
    border: 1px solid #ddd;
    background: white;
    width: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*上下布局*/
    flex-direction: column;
    /*上下内边距20像素*/
    padding: 20px 0;
    opacity: 80%;
}

.siteList .addButton .icon {
    width: 56px;
    height: 56px;
}

.siteList .addButton .text {
    font-size: 14px;
    margin-top: 4px;
}

.siteList .addButton .icon-wrapper {
    /*border: 1px solid red;*/
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.favicon {
    width: 40px;
}